<template>
	<view class="wp">
		<nav-public :title="'VIP无忧卡'" :background="'#0c0a0a'" :color="'white'" :isTransparent="true"></nav-public>
		<view class="fill_bg">
			<!-- <image class="bg" src="https://img.jinghushi.com/images/9/2024/11/j4iAHprKllVYh59Dt95dGIszdiIRkr.png" mode="widthFix"></image> -->
			<image class="bg" src="https://img.jinghushi.com/images/9/2024/12/KEh08HhREyBePZmudP5hLLylIzM5rH.jpg" mode="widthFix"></image>
			<view class="content">
				<view class="list">
					<view class="item" :class="{'item_ac':optionid==item.id,'item1':vipGoodsList.options.length==1}" v-for="item in vipGoodsList.options" @click="selectId(item.id,index)">
						<image :src="item.thumb" mode="widthFix"></image>
						<view class="info">
							<view class="clamp2">{{item.title}}</view>
							<view class="price"><text>￥</text>{{Number(item.saleprice)}}</view>
							<view class="i_tip">最高补贴{{Number(vipGoodsList.goods.btrate)}}%</view>
							<view class="i_tip" v-if="vipGoodsList.shareprice!=''">分享{{vipGoodsList.shareprice}}元</view>
						</view>
					</view>
				</view>
				<view class="goOpen" @click="toBuyReal">确认开通</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				vipGoodsList: [],
				// current: 0,
				mid: -1,
				optionid: 0,
				code: ''
			}
		},
		async onLoad(options) {
			if(options.mid){
				this.mid = options.mid;
			}
			if(options.code) this.code = options.code;
			if(!uni.getStorageSync('token')){
				this.getToken();
			}else{
				this.getVipGoodsList();
			}
			// await this.$onLaunched;
		},
		methods: {
			getToken(){
				/*#ifdef H5*/
				this.$axios('login/autoGzlogin','POST','member',{
					mid: this.mid,
					code: this.code,
				}).then(res=>{
					if(res.data.code == 300001){
						this.$navTo(res.data.data);
					}else if(res.data.code == 200){
						uni.setStorageSync('token', res.data.data);
						uni.setStorageSync('Jh_recotabshops', 1);
						this.getSharePath();
						this.getVipGoodsList()
					}
				})
				/*#endif*/
				/*#ifndef H5*/
				uni.login({
					provider: 'weixin',
					success:res=> {
						this.$axios('login/autologin','POST','member',{
							mid: this.mid,
							code: res.code
						}).then(res=>{
							if(res.data.code == 200){
								uni.setStorageSync('token', res.data.data);
								uni.setStorageSync('Jh_recotabshops', 1);
								this.getSharePath();
								this.getVipGoodsList()
							}
						})
					}
				})
				/*#endif*/
			},
			selectId(id,index){
				this.optionid = id;
			},
			toBuyReal(){
				if(this.optionid==0){
					return this.$api.msg('请先选择赠品');
				}
				uni.navigateTo({
					url: '/pages/order/createOrder?type=2&id=' + this.vipGoodsList.goods.id + "&optionid=" + this.optionid +"&total=1"
				})
			},
			getVipGoodsList(){
				this.$axios('flowcard/flowgoods','POST','shop').then(res=>{
					if(res.data.code == 200){
						this.vipGoodsList = res.data.data;
						this.optionid = this.vipGoodsList.options[0].id;
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page{
		background: #0c0a0a;
		padding-bottom: 100rpx;
	}
	.wp {
		background: #0c0a0a;
		padding-bottom: 40rpx;
	}
	.fill_bg{
		position: relative;
		display: flex;
		.bg{
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}
		.vip_shop{
			position: absolute;
			left: 0;
			right: 0;
			margin: auto;
			text-align: center;
			bottom: 54rpx;
			image{
				width: 588rpx;
				display: block;
				margin: 0 auto;
			}
		}
	}
	.content{
		padding: 0 40rpx 80rpx;
		position: relative;
		top: 490rpx;
		width: 100%;
		.l_tit{
			font-size: 44rpx;
			font-weight: 600;
			color: #C3996F;
			background-image: linear-gradient(to bottom, #FFFFFF, #FFDFA3); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
			background-clip: text;/*将设置的背景颜色限制在文字中*/
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;/*给文字设置成透明*/
			text-align: center;
		}
		.l_tip{
			font-size: 24rpx;
			color: #DAB897;
			text-align: center;
			opacity: .4;
			line-height: 56rpx;
		}
		.list{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin-top: 40rpx;
			.item{
				margin-bottom: 26rpx;
				border-radius: 12rpx;
				width: 48%;
				overflow: hidden;
				border: 4rpx solid transparent;
				transition: all 0.3s;
				image{
					width: 100%;
					height: 314rpx;
					display: block;
				}
				.info{
					background: #FDF6EC;
					padding: 20rpx;
					font-weight: 600;
					color: #2C0F05;
					font-size: 32rpx;
					.price{
						font-size: 36rpx;
						// font-size: 24rpx;
						margin-top: 6rpx;
						text{
							font-size: 20rpx;
							color: #310D03;
						}
					}
					.i_tip{
						// font-weight: 400;
						font-size: 24rpx;
						margin-top: 4rpx;
					}
				}
			}
			.item1{
				width: 90%;
				margin: 0 auto;
				image{
					// height: 528rpx;
				}
			}
			.item_ac{
				border: 4rpx solid #d7b693;
				box-shadow: 4rpx 4rpx 34rpx 6rpx rgba(245, 237, 252, 0.8);
				transform: scale(1.03);
			}
		}
	}
	.goOpen{
		margin: 0 auto;
		width: 504rpx;
		line-height: 94rpx;
		background: linear-gradient( 90deg, #F6E6C7 0%, #EED192 100%);
		border-radius: 47rpx;
		font-size: 32rpx;
		font-weight: 600;
		color: #412116;
		text-align: center;	
		margin-top: 50rpx;
	}
	.vip_buy{
		width: 100%;
		height: 186rpx;
		background: #050402;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 40rpx;
		position: fixed;
		bottom: 0;
		.buy_left{
			display: flex;
			align-items: center;
			font-size: 24rpx;
			color: #999999;
			.vip_price{
				font-size: 44rpx;
				font-weight: 600;
				color: #EED192;
				margin-right: 10rpx;
			}
		}
		.vip_btn{
			width: 354rpx;
			line-height: 94rpx;
			background: linear-gradient( 90deg, #F6E6C7 0%, #EED192 100%);
			border-radius: 47rpx;
			font-size: 32rpx;
			color: #412116;
			text-align: center;
			font-weight: 600;
		}
	}
</style>